import React, { useEffect, useState } from "react";
// useEffect:
// - Effect Hook 可以让你在函数组件中执行副作用操作
// - Effect可以告诉 React 组件需要在挂载完成、更新完成、卸载前执行某些操作
export default function App() {
  const [count, setCount] = useState(0)
  const [isHot, setIsHot] = useState(true);
  // - useEffect接受第一个参数是一个回调函数,当达到条件的时候,会触发当前的回调函数
  // - useEffect的回调函数可以返回一个函数,
  // -组件被卸载的时候,或再次渲染的时候,会执行这个函数,用来做收尾工作
  useEffect(() => {
    console.log('isHot执行了');
    return () => {
      console.log('isHot的Effect卸载函数'+ count);
    }
  }, [isHot,count])

  useEffect(()=>{
    console.log('const执行了');
  },[count])

  return (
    <div>
      <h1>count的值是{count}</h1>
      <button onClick={()=>{setCount(count+1)}}>累加</button>
      <hr />
      <h2>今天的天气真{isHot ? '晴朗':'下雨'}</h2>
      <button onClick={()=>{ setIsHot(!isHot)}}>修改天气</button>
    </div >
  )
}

